<template>
    <div>
      <div class="goods">
        <div class="menu-wrapper" ref="menuWrapper">
          <ul>
            <li class="menu-item" v-for="(item,index) in goods" :class="{'current':currentIndex===index}"  @click="selectMenu(index)">
              <span class="text"><i v-if="item.type>0"  class="icon" :class="classMap[item.type]"></i>{{item.name}}</span>
            </li>
          </ul>
        </div>
        <div class="foods-wrapper" ref="foodWrapper">
          <ul>
            <li v-for="item in goods" class="food-list food-list-hook">
              <h1 class="title">{{item.name}}</h1>
              <ul>
                <li @click="selFood(food,$event)" v-for="food in item.foods" class="food-item">
                  <div class="icon">
                    <img width="57" height="57" :src="food.icon" alt="">
                  </div>
                  <div class="food-info">

                    <h2 class="name">{{food.name}}</h2>
                    <p class="desc">{{food.description}}</p>

                    <div class="extra">
                      <span>月售{{food.sellCount}}份</span>
                      <span>好评率{{food.rating}}%</span>
                    </div>
                    <div class="pricr">
                      <span class="now">￥{{food.price}}</span>
                      <s class="old" v-if="food.rating">￥{{food.rating}}</s>
                    </div>
                    <div class="car-wrapper">
                      <carcontrol :food="food"></carcontrol>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <shopcar :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcar>
      </div>
      <food :food="selectedFood" ref="food" ></food>
    </div>
</template>


<script>
  import BScroll from 'better-scroll';//better scroll 引入初始化
  import shopcar from '../shopcar/shopcar.vue'
  import carcontrol from '../carcontrol/carcontrol.vue'
  import food from '../food/food.vue'
  const ERR_OK =0;
  export default{
      components:{
        shopcar,
        carcontrol,
        food
      },
      props: {
         seller:{
            type:Object
          }
      },
    data() {
      return{
          goods:[],
        listheight:[],
        scrollY:0,
        selectedFood:{}


      }
    },
    computed:{
      currentIndex(){
        for (var i = 0; i < this.listheight.length; i++) {
          var height1 = this.listheight[i];
          var height2 = this.listheight[i+1];
          if(!height2 || (this.scrollY>=height1 && this.scrollY < height2)){
              return i;
          }
        }
        return 0;

      }
    },
    computed:{
      currentIndex(){
        for (var i = 0; i < this.listheight.length; i++) {
          var height1 = this.listheight[i];
          var height2 = this.listheight[i+1];
          if(!height2 || (this.scrollY>=height1 && this.scrollY < height2)){
            return i;
          }
        }
        return 0;
      },
      selectFoods(){
              let foods =[]
              this.goods.forEach((good)=>{
                good.foods.forEach((food)=>{
                  if(food.count){
                      foods.push(food)
                  }
                })
              })
            return foods
      }
  },
    created() {
      this.classMap=['decrease','discount','special','invoice','guarantee'];
        this.$http.get('./api/goods').then((res)=>{
            res=res.body
//          console.log(res);
          if(res.errno==ERR_OK){
            this.goods=res.data;
            this.$nextTick(()=>{//保证数据在dom渲染完成之后来计算页面dom的高度。
              this._initScroll();
//              console.log(this.$refs.menuWrapper);
              this._calculateHeight();
            })
          }

        })
    },


    methods: {
      selFood(food, event){
        if (!event._constructed) {
          return;
        }
        this.selectedFood = food;
        this.$refs.food.show();
      },

        selectMenu(index){
          let foodList =this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
          let el = foodList[index];
          this.foodScroll.scrollToElement(el,500)
//          console.log(index);
        },
      _initScroll(){
        this.menuScroll = new BScroll(this.$refs.menuWrapper,{
            click:true
        });//初始化对象
        this.foodScroll = new BScroll(this.$refs.foodWrapper,{
          click:true,
          probeType:3
        });
        this.foodScroll.on('scroll',(pos)=>{
          this.scrollY = Math.abs(Math.round(pos.y));
        })
      },
      _calculateHeight(){
        let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
//        console.log(foodList);
        let height = 0;
        this.listheight.push(height)
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listheight.push(height);
        }

      },




    }
  }
</script>

<style lang="scss">
.goods{
  width: 100%;
  display: flex;
  overflow: hidden;
  position: absolute;
  top: 176px;
  bottom:52px;
  box-sizing: border-box;

  .menu-wrapper{
    flex: 0 0 80px;
    width: 80px;
    background-color: #f3f5f7;

    .menu-item{
      width: 56px;
      height: 54px;
      line-height: 14px;
      padding:0 12px;
      display: table;
      text-align: center;
      background-color: #f3f5f7;
      vertical-align: middle;
      display: table;

        &.current{
           background-color: #fff;
           position: relative;
           margin-top: -1px;
           z-index: 9;
        .text{
          border: none;
          font-weight:700;
        }
        }


&.current{
         background-color: #fff;
         position: relative;
         margin-top: -1px;
          z-index: 9;
           .text{
             border: none;
             font-weight:700;

           }
       }

      .icon{

        vertical-align: top;
        display:inline-block;
        padding-right: 2px;
        width: 12px;
        height: 12px;
        background-size:12px 12px;
        background-repeat: no-repeat;

       &.decrease{
          background-image: url(decrease_3@2x.png);
        }
       &.discount{
          background-image: url(discount_3@2x.png);
        }
       &.guarantee{
          background-image: url(guarantee_3@2x.png);
        }
       &.invoice{
          background-image: url(invoice_3@2x.png);
        }
       &.special{
          background-image: url(special_3@2x.png);
        }
      }
      .text{
        width: 56px;
        color: #000;
        font-weight:200;
        font-size:12px;
        display: table-cell;
        vertical-align: middle;
        border-bottom:1px solid rgba(7,17,27,0.1);

      }
    }
  }
.foods-wrapper{

      flex:1;
      .title{
        height: 26px;
        line-height: 26px;
        padding-left: 14px;
        background-color: #f3f5f7;
        border-left:2px solid #d9dde1;
        font-size: 12px;
        color: rgb(147,153,159);

      }
      .food-item{
        display: flex;
        margin: 18px;
        padding-bottom: 18px;
        border-bottom:1px solid rgba(7,17,27,.1);
        position: relative;
      &.last-child{
         border:none;

       }
      .icon{
        flex: 0 0 57px;
        width: 57px;
        margin-right: 10px;

      }
      .food-info{
        flex: 1;
        .name{
          font-size: 14px;
          color: rgb(7,17,27);
          line-height: 10px;
        }
        .desc, .extra{
          font-size: 10px;
          color: rgb(147,153,159);
          margin:8px 0;
          line-height: 10px;
        }
        .extra{
          span{
            margin-right: 10px;
          }
        }
        .pricr{
          font-size:0;

          .now{
            font-weight:700;
            margin-right:18px;
            font-size: 14px;
            line-height: 24px;
            color: rgb(240,20,20);
            margin-right: 8px;
          }
          .old{
            font-size:10px;
            color: rgb(147,153,159);
            line-height: 24px;
            font-weight: 700;
          }
        }
        .car-wrapper{
          position: absolute;
          right: 0;
          bottom: 12px;
        }
        }
       }
      }

}

</style>

